<template>
<view class="w-100 re h-100">
	<view class="w-100 px-3 pt-3 re z-999" style="z-index: 99999999;">
		<TabBarTime :list="time_list" :list_id="list_id" @get_change="get_list" @get_other="set_other"></TabBarTime>
	</view>
	<scroll-view class="scroll-view_H uni-scroll" scroll-y="true" @scrolltolower="lower" :lower-threshold="200">
		<!-- 瀑布流布局列表 -->
		<view class="w-100 px-3 py-2">
			<view class="pubuItem">
				<view class="item-masonry" v-for="(item, index) in comList" :key="index">
					<image :src="item.img" mode="widthFix" class="circle16"></image>
					<view class="w-100 font24 font500 t-0 pl-2 pt-1"> 
						{{ item.name }}
					</view>
				</view>
			</view>
			<view class="w-100 h200"></view>
		</view>
	</scroll-view>
</view>
</template>

<script>
	import Time from "../../common/time.js"
	import TabBarTime from "./components/tab_bar_time.vue"
    export default {
		mixins:[Time],
		components:{TabBarTime},
        data() {
            return {
				time_list:[
					{title:"全部",name:"2022",code:1},
					{title:"今天",name:"06-11",code:2},
					{title:"明天",name:"06-12",code:3},
					{title:"周六",name:"06-13",code:4},
					{title:"其他",name:"",code:5}
				],
				list_id:"1",
                comList: [{
                        img: "https://t7.baidu.com/it/u=4036010509,3445021118&fm=193&f=GIF",
                        name: '意式咖啡-初阶课',
                    },
                    {
                        img: 'https://t7.baidu.com/it/u=4240641596,3235181048&fm=193&f=GIF',
                        name: '意式咖啡-初阶课',
                    } , {
                        img: 'https://t7.baidu.com/it/u=1819248061,230866778&fm=193&f=GIF',
                       name: '意式咖啡-初阶课',
                    }, {
                        img: 'https://t7.baidu.com/it/u=1819248061,230866778&fm=193&f=GIF',
                       name: '意式咖啡-初阶课',
                    },{
                        img: 'https://t7.baidu.com/it/u=4036010509,3445021118&fm=193&f=GIF',
                       name: '意式咖啡-初阶课',
                    },
                ], //商品列表
            };
        },
		created() {
			this.get_time()
		},
        methods: {
			get_list(val){
				this.list_id = val.code
				if(val.code != 5){
					this.time_list[4].name = ''
				}
			},
			set_other(val){
				this.time_list[4].title = val.title
				this.time_list[4].name = val.name
				this.time_list[4].time = val.time
				this.list_id = 5
			},
			lower(){
				
			}
		},

    };
</script>

<style scoped="scoped" lang="scss">
	.scroll-view_H{
		position: absolute;
		top: 152rpx;
		left: 0;
		bottom: 0;
		right: 0;
		z-index: 9;
	}

    .pubuBox {
        padding: 22rpx;
    }

    .pubuItem {
        column-count: 2;
        column-gap: 20rpx;
    }

    .item-masonry {
        box-sizing: border-box;
        border-radius: 16rpx;
        overflow: hidden;
        break-inside: avoid;
        /*避免在元素内部插入分页符*/
        box-sizing: border-box;
        margin-bottom: 20rpx;
    }

    .item-masonry image {
        width: 100%;
    }

    .listtitle {
        padding-left: 22rpx;
        font-size: 24rpx;
        padding-bottom: 22rpx;

        .listtitle1 {
            line-height: 39rpx;
            text-overflow: -o-ellipsis-lastline;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;
            min-height: 39rpx;
            max-height: 78rpx;
        }

        .listtitle2 {
            color: #ff0000;
            font-size: 32rpx;
            line-height: 32rpx;
            font-weight: bold;
            padding-top: 22rpx;

            .listtitle2son {
                font-size: 32rpx;
            }
        }

        .listtitle3 {
            font-size: 28rpx;
            color: #909399;
            line-height: 32rpx;
            padding-top: 22rpx;
        }
    }

    .Index {
        width: 100%;
        height: 100%;
    }
</style>